import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Steps } from "antd";
import { push, goBack } from "react-router-redux";
import Bottom from "../../components/UserBottom";
import Header from "../../components/UserHeader";
import style from "./style.less";
import ForgetMobile from "../../components/ForgetMobile";
import MobilePassword from "../../components/MobilePassword";
import Prompt from "../../components/Prompt";
import Process from "../../components/Process";
const Step = Steps.Step;

class ForgetPassword extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      stepInfo: [
        { num: "01", title: "手机验证" },
        { num: "02", title: "设置新密码" }
      ],
      mobile: ""
    };
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }

  nextStep = (mobile, code) => {
    this.setState({ mobile, code });
    this.next();
  };

  resetSuccess = value => {
    this.props.navigateTo("/login");
  };

  render() {
    const { current, stepInfo, mobile, code } = this.state;
    const steps = [
      {
        title: <Process {...stepInfo[0]} />,
        content: <ForgetMobile nextStep={this.nextStep} />
      },
      {
        title: <Process {...stepInfo[1]} />,
        content: (
          <MobilePassword
            success={this.resetSuccess}
            mobile={mobile}
            code={code}
          />
        )
      }
    ];

    return (
      <div className={style.text}>
        <div className={style.Head}>
          <Header title="手机找回密码" type="2" />
          <div className={style.fgPassword}>
            <div className={style.dash_areaone} />
            <div className={style.dash_areatwo} />
            <div>
              <Steps current={current}>
                {steps.map((item, index) => (
                  <Step key={index} title={item.title} />
                ))}
              </Steps>
              <div className="steps-content">
                {steps[this.state.current].content}
              </div>
            </div>
          </div>
        </div>
        <div className={style.bottom}>
          <Prompt />
        </div>
        <Bottom />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {};
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    navigateTo: location => {
      dispatch(push(location));
    },
    goBack: () => {
      dispatch(goBack());
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ForgetPassword);
